<template>
	<div class="function-home-panel">
		<div class="function-info-wrap">
			<awsui-form ref="form" :model="FunctionInfo" label-position="top" label-width="80px" size="mini" :rules="rules" :disabled="isReadOnlyAppAuth">
			<div class="function-info">
				<div class="info-title">{{$t("基本信息")}}</div>
				<el-divider class="default-divider"></el-divider>
				<div class="info-form">
					<el-row :gutter="15">
							<el-col :span="12">
								<awsui-form-item :label="$t('名称')" prop="name" required>
									<awsui-input v-model="FunctionInfo.name" :placeholder="$t('请输入名称')" maxlength="50">
										<!--<template #suffix>
											<i class="awsui-iconfont">&#xe7be;</i>
										</template>-->
									</awsui-input>
								</awsui-form-item>
							</el-col>
							<el-col :span="12">
								<div class="userphoto" :style="isReadOnlyAppAuth?'pointer-events: none;opacity:0.9;':''">
									<awsui-icon-picker v-model="iconColors" :defaultOptions="defaultIconPickerOptions" @change="handleIconFont" @status="getIconPickerStatus" v-if="updateIconPicker"></awsui-icon-picker>
									<div style="color: #D6D6D6" v-show="!isReadOnlyAppAuth">{{$t("点击设置图标")}}</div>
								</div>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('URL地址')" prop="linkUrl" required>
									<awsui-formula v-model="FunctionInfo.linkUrl" :option="atFormulaOptionForUrl" :readonly="isReadOnlyAppAuth" :disable="isReadOnlyAppAuth" @input="onCmCodeChangeForUrl" :placeholder="$t('请输入Url地址，空地址可填 / ')"></awsui-formula>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15" v-if="FunctionInfo.linkUrl!='/'  && FunctionInfo.linkUrl!=''">
							<el-col :span="24">
								<awsui-form-item :label="$t('打开目标')" clearable="true" style="width:100%;">
									<awsui-select v-model="FunctionInfo.target" :options="targetOption" :placeholder="$t('请选择打开目标')"></awsui-select>
								</awsui-form-item>
							</el-col>
						</el-row>

					<el-row :gutter="15" v-if="FunctionInfo.id=='' && currentAppId==''">
							<el-col :span="24">
								<awsui-form-item :label="$t('所属应用')" prop="appId" required>
									<aws-app-select width="100%"
													:sid="appInfo.sid"
													filter="develop"
                          :placeholder="$t('按应用过滤')"
													:value="FunctionInfo.appId"
													:disabled="currentAppId!=''"
													v-on:getResult="getSelectAppValue">
									</aws-app-select>
								</awsui-form-item>
							</el-col>
						</el-row>

						<awsui-form-item :label="$t('描述')">
							<awsui-input v-model="FunctionInfo.desc" type="textarea" :placeholder="$t('请输入描述')"></awsui-input>
						</awsui-form-item>
				</div>
			</div>

			<div class="config-advanced-show-op" v-if="FunctionInfo.id!=''">
				<el-link @click="changeAdvancedFlag" v-html="showAdvancedConfig?$t('隐藏高级设置'):$t('显示高级设置')" type="primary" underline="false" href="javascript:void(0);" style="font-size:13px;font-weight:normal;"></el-link>
				<!--<i class="awsui-iconfont" @click="changeAdvancedFlag" v-html="showAdvancedConfig?'&#xe718;':'&#xe716;'"> </i>-->
			</div>

			<div class="function-info" v-if="FunctionInfo.id!=''" v-show="showAdvancedConfig">
				<div class="info-title">{{$t("高级设置")}}</div>
				<el-divider class="default-divider"></el-divider>
				<div class="info-form">
					<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('显示顺序')" prop="orderIndex" required>
									<awsui-input v-model.number="FunctionInfo.orderIndex" :placeholder="$t('请输入显示顺序')" :disabled="isReadOnlyAppAuth"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
					<el-row :gutter="15" v-show="FunctionInfo.showPortalNotifier && ( FunctionInfo.linkUrl!='/' && FunctionInfo.linkUrl!='' )">
							<el-col :span="24">
								<awsui-form-item :label="$t('Metro栅格')">
									<awsui-input v-model="FunctionInfo.notifier" :placeholder="$t('通过特定接口的Class类，自定义盯到Metro桌面的栅格内容样式')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展1')">
									<awsui-input v-model="FunctionInfo.ext1" :placeholder="$t('请输入自定义扩展1')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展2')">
									<awsui-input v-model="FunctionInfo.ext2" :placeholder="$t('请输入自定义扩展2')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展3')">
									<awsui-input v-model="FunctionInfo.ext3" :placeholder="$t('请输入自定义扩展3')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展4')">
									<awsui-input v-model="FunctionInfo.ext4" :placeholder="$t('请输入自定义扩展4')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="15">
							<el-col :span="24">
								<awsui-form-item :label="$t('自定义扩展5')">
									<awsui-input v-model="FunctionInfo.ext5" :placeholder="$t('请输入自定义扩展5')"></awsui-input>
								</awsui-form-item>
							</el-col>
						</el-row>

				</div>
			</div>

			<div class="function-info" v-if="FunctionInfo.id!=''" v-show="showAdvancedConfig">
				<div class="info-form" style="position:relative;">
					<div class="app-info-toolbar" v-show="currentAppId==''">
						<el-link @click="changeNavAppId" type="primary" underline="false" href="javascript:void(0);" style="font-size:13px;font-weight:normal;" :disabled="isReadOnlyAppAuth">{{$t("设置/更改归属应用")}}</el-link>
					</div>
					<aws-app-info ref="appinfo" :sid="appInfo.sid" :appId="appInfo.appId" :id="appInfo.id" :modelType="appInfo.modelType " :hideManage="appInfo.hideManage" :permTypeScope="appInfo.permTypeScope" :emptyText="appInfo.emptyText"></aws-app-info>
				</div>
			</div>

			</awsui-form>
		</div>

		<awsui-dialog :title="$t('选择归属应用')" v-model="appDialogVisible" width="60%">
			<div class="nav-owner-app-dlg-content" style="overflow:hidden;">

				<aws-app-select width="100%"
								:sid="appInfo.sid"
								filter="develop"
								:placeholder="$t('选择归属应用')"
								:value="FunctionInfo.appId"
								v-on:getResult="getSelectAppValue">
				</aws-app-select>
			</div>
			<template #footer>
					<span class="dialog-footer">
					  <awsui-button @click="appDialogVisible=false">{{$t("关 闭")}}</awsui-button>
					</span>
			</template>
		</awsui-dialog>
		<!--<NPS :npsCode="npsData"></NPS>-->
	</div>
</template>

<script>
	export default {
		name: "FunctionInfo",
		components: {},
		props: ['currentNodeId', 'currentNodeName', 'currentOpType', 'currentNodeReadonly', 'currentAppId', 'currentSystemData','isYijingCloud'],
		data() {
			return {
				rules: {
					name: [
						{required: true, message: "必填"},
					],
					linkUrl: [
						{required: true, message: "必填"},
					],
					orderIndex: [
						{required: true, message: '必填'},
						{type: 'number', message: '必须为数字值'},
						{pattern: /(^[1-9]\d*$)/, message: '请输入正整数', trigger: 'change'}
					],
          /*
					appId: [
						{required: true, message: "必填"},
					],
           */
				},
				labelPosition: 'left',
				isReadOnlyAppAuth: this.currentNodeReadonly,
				targetOption: [{
					value: 'mainFrame',
					label: this.$t("主工作区")
				}, {
					value: '_blank',
					label: this.$t("新窗口")
				}, {
					value: 'sidebar',
					label: this.$t("侧边栏")
				}],
				FunctionInfo: {
					id: "",
					systemId: "",
					directoryId: "",
					name: '',
					linkUrl: "/",
					target: "mainFrame",
					desc: '',
					appId: "",
					isIconFont: true,
					iconFontColor: "#ff9421",
					iconFontCode: "&#xe719;",
					icon16: "",
					icon64: "",
					icon96: "",
					orderIndex: "0",
					notifier: "",
					isActivity: "1",//1 启用   0 关闭
					ext1: '',
					ext2: '',
					ext3: '',
					ext4: '',
					ext5: '',
					icon16IconFont: "",
					showPortalNotifier: false,
				}, appInfo: {
					sid: settingParam.sessionId,
					appId: "",
					modelType: 'nav',
					id: "",
					hideManage: true,
					permTypeScope: "AB",
					emptyText: '',
				},
				appDialogVisible: false,
				showAdvancedConfig: false,
				defaultIconPickerOptions: {
					type: "background", //必传，type为"background"时，改变背景颜色，图标颜色固定，type为"icon"时改变图标颜色，背景颜色固定
					//icon: "&#xe614;",  //图标
					//color: "#f2f2f2", //颜色
					format: false, //icon是否是图片格式
					close: false,
				},
				iconColors: {
					icon: "",
					color: ""
				},
				updateIconPicker: true,
				atFormulaOptionForUrl: {
					contextData: {
						data: [],
						appId: ""
					}
				},
				currentAppId: this.currentAppId,
				npsData:"NPS20502",
			}
		},
		mounted() {
			let $this = this;
			let that = this;
			let id = that.currentNodeId;
			let opType = that.currentOpType;
			if (opType == "add") {
				if (id != "" && id.startsWith("d_")) {
					that.FunctionInfo.directoryId = id.substr(2);
					//目录和菜单新建时默认使用子系统图标
					let info = that.currentSystemData;
					if (info.isIconFont) {
						that.FunctionInfo.icon16IconFont = info.iconFont.code + "|" + info.iconFont.color;
						let iconValueOb = {"icon": info.iconFont.code, "color": info.iconFont.color};
						that.iconColors.icon = iconValueOb.icon;
						that.iconColors.color = iconValueOb.color;
						that.defaultIconPickerOptions.show = false;
						that.defaultIconPickerOptions.format = false;
						that.reloadIconPicker();
					} else {
						if (info.icon16 != "") {
							that.iconColors.icon = info.icon16;
							that.defaultIconPickerOptions.format = true;
							that.reloadIconPicker();
						} else {
							that.iconColors.icon = info.iconFont.code;
							that.iconColors.color = info.iconFont.color;
							that.reloadIconPicker();
						}
						that.FunctionInfo.icon16IconFont = info.icon16Original;
						that.FunctionInfo.icon64 = info.icon64;
						that.FunctionInfo.icon96 = info.icon96;
					}

          that.rules["appId"] =  [
            {required: true, message: this.$t("必填")},
          ];

				}
				that.isReadOnlyAppAuth = that.currentNodeReadonly;
				that.FunctionInfo.appId = that.currentAppId;
			} else {
				if (id != "") {
					if (id.startsWith("f_")) {
						that.FunctionInfo.id = id.substr(2);
						that.appInfo.id = id;
					}
					that.getFunctionInfo();
				}
			}
		},
		methods: {
			onCmCodeChangeForUrl(newCode) {
				if (typeof newCode == "string") {
					this.FunctionInfo.linkUrl = newCode;
				}
			},
			handleIconFont(iconFont) {
				this.FunctionInfo.icon16IconFont = iconFont.icon + "|" + iconFont.color;
				/*
				this.defaultIconPickerOptions.icon = iconFont.icon;
				this.defaultIconPickerOptions.color = iconFont.color;
				this.defaultIconPickerOptions.format = false;
				*/
				//this.reloadIconPicker();
			},
			getIconPickerStatus(val) {
				console.log("getStatus:" + val);
			},
			validForm(callback) {
				/*let flag = true;
				this.$refs.form.validateField("name", (msg, info) => {
					if (info != null) {
						flag = false;
					}
				});
				this.$refs.form.validateField("linkUrl", (msg, info) => {
					if (info != null) {
						flag = false;
					}
				});
				if (this.FunctionInfo.id == '') {
					this.$refs.form.validateField("appId", (msg, info) => {
						if (info != null) {
							flag = false;
						}
					});
				}

				this.$refs.form.validateField("orderIndex", (msg, info) => {
					if (info != null) {
						flag = false;
					}
				});
				return flag;*/
				this.$refs["form"].validate((valid) => {
					if (valid) {
						callback();
					}
				});
			},
			getSelectAppValue(data) {
				this.FunctionInfo.appId = data;
				this.appInfo.appId = data;
        if (data == "") {
          this.appInfo.emptyText = this.$t("未设置所属应用");
        }

			},
			getFunctionInfo() {
				let $this = this;
				let that = this;
				let data = {
					url: 'jd',
					data: {
						cmd: 'CONSOLE_P_NAV_DESIGN_DETAIL_INFO',
						sid: settingParam.sessionId,
						type: "function",
						id: that.FunctionInfo.id
					}
				};
				// 查询数据
				that.awsuiaxios.post(data).then(function (ro) {
					if (ro.result == "ok") {
						let info = ro.data.info;
						//that.isReadOnlyAppAuth = info.readonly;
						that.FunctionInfo.directoryId = info.directoryId;
						that.FunctionInfo.name = info.functionName;
						that.FunctionInfo.desc = info.navDesc;
						that.FunctionInfo.target = info.workTarget;
						that.FunctionInfo.linkUrl = info.linkUrl;
						that.FunctionInfo.orderIndex = info.orderIndex;
						that.FunctionInfo.appId = info.appid;
						that.appInfo.appId = info.appid;
						that.FunctionInfo.isActivity = info.isActivity ? "1" : "0";
						that.FunctionInfo.notifier = info.notifier;
						that.FunctionInfo.ext1 = info.ext1;
						that.FunctionInfo.ext2 = info.ext2;
						that.FunctionInfo.ext3 = info.ext3;
						that.FunctionInfo.ext4 = info.ext4;
						that.FunctionInfo.ext5 = info.ext5;
						that.FunctionInfo.icon16 = info.icon16;
						that.FunctionInfo.icon64 = info.icon64;
						that.FunctionInfo.icon96 = info.icon96;
						that.FunctionInfo.showPortalNotifier = info.showPortalNotifier;
						//图标
						if (info.isIconfont) {
							that.FunctionInfo.icon16IconFont = info.iconFontCode + "|" + info.iconFontColor;
							let iconValueOb = {"icon": info.iconFontCode, "color": info.iconFontColor};
							//that.defaultIconPickerOptions.icon = iconValueOb.icon;
							//that.defaultIconPickerOptions.color = iconValueOb.color;
							that.iconColors.icon = iconValueOb.icon;
							that.iconColors.color = iconValueOb.color;
							that.defaultIconPickerOptions.show = false;
							that.defaultIconPickerOptions.format = false;
							//console.log(iconValueOb);
							that.reloadIconPicker();
						} else {
							if (info.icon96 != "") {
								//that.defaultIconPickerOptions.icon = info.icon96Img;
								that.iconColors.icon = info.icon96Img;

								that.defaultIconPickerOptions.format = true;
								that.reloadIconPicker();
							} else {
								that.iconColors.icon = info.iconFontCode;
								that.iconColors.color = info.iconFontColor;
								that.reloadIconPicker();
							}
							that.FunctionInfo.icon16IconFont = info.icon16;
						}
						if (info.appid == "") {
							that.appInfo.emptyText = that.$t("未设置所属应用");
              that.showAdvancedConfig = true;
              that.$nextTick(() => {
                document.getElementsByClassName("app-info-toolbar")[0].scrollIntoView({block: "center",behavior: "smooth"});
              });
						} else {
							//所属应用是否有效
							if (info.isInValidAppId) {
								that.appInfo.appId = "";
								that.appInfo.emptyText = that.$t("所属应用无效,请重新设置");
								that.$message({type: "warning", message: that.$t("所属应用无效")});
							}
						}
					}

				}).catch(error => {
					console.log(error);
				});
			},
			reloadIconPicker() {
				// 移除组件
				this.updateIconPicker = false;
				// 在组件移除后，重新渲染组件
				// this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
				this.$nextTick(() => {
					this.updateIconPicker = true
				})
			},

			changeNavAppId() {
				this.appDialogVisible = true;
			},
			applyNavAppId() {
			},
			changeAdvancedFlag() {
				this.showAdvancedConfig = !this.showAdvancedConfig;
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.function-info-wrap {
		overflow-y: auto;
		padding: 0 30px !important;
		height: calc(100vh - 54px - 48px);
	}

	.info-title {
		font-size: 13px !important;
		color: #333 !important;
		font-weight: 700 !important;
		margin-top: 10px;
		display: inline-block !important;
	}

	.config-advanced-show-op {
		float: right;
		margin-top: 10px;
	}

	.default-divider {
		margin: 6px 0 !important;
	}

	.userphoto {
		height: 100px;
		width: 125px;
		/*float: left;*/
		text-align: -webkit-center;
		padding-top: 1%;
		margin: 0 auto;
	}
</style>

<style>
	.app-info-toolbar {
		width: 300px;
		position: absolute;
		right: 0px;
		top: 17px;
		text-align: right;
	}
	/*  应用信息 需要更改的样式*/
	.el-header {
		padding: 15px 0px !important;
	}

	.app-info {
		padding: 0px 0px !important;
	}

	.cc-dev-main {
		padding: 5px 0px !important;
	}

	.cc-dev-main-card {
		margin: 10px 0 !important;
	}

	/*  应用信息 需要更改的样式*/
</style>